<template>
    <div class="productContainer">
        <!-- 商品模块 -->
        <ul class="product" :class="['productLayout' + productInfo.productLayout, 'style' + productInfo.style]">
            <li
                v-for="item in productInfo.list"
                :key="item.Id"
            >
                <!-- 商品内容 -->
                <div class="content">
                    <router-link :to="`/${common.extConfig.storeId}/pages/product/index/${item.Id}`">
                        <img :src="common.CdnUrl + '/' + item.ImgUrl" alt="">
                        <span class="name">{{item.Name}}</span>
                        <span class="desc">{{item.Feature}}</span>
                    </router-link>
                </div>
                <!-- 购买 -->
                <div class="buyWarp">
                    <span class="price">
                        <em>¥</em>
                        {{item.SalePrice}}
                    </span>
                    <span class="buy">
                        <i v-if="productInfo.style == 1 ? true : false" aria-label="图标: plus-circle" class="anticon anticon-plus-circle" style="font-size: 23px;"><svg viewBox="64 64 896 896" class="" data-icon="plus-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path fill="#F5222D" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path fill="#fff1f0" d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm192 396c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z"></path><path fill="#F5222D" d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path></svg></i>
                        <img v-if="productInfo.style == 2 ? true : false" class="buyBtn" src="https://insidexkd.oss-cn-shanghai.aliyuncs.com/xkdnewyun/systemfile/wxashop/icon/shopcart-icon1.png">
                        <img v-if="productInfo.style == 3 ? true : false" class="buyBtn" src="https://insidexkd.oss-cn-shanghai.aliyuncs.com/xkdnewyun/systemfile/wxashop/icon/shopcart-icon2.png">
                        <MyButton
                            v-if="productInfo.style == 4 ? true : false"
                            btnMsg="BUY"
                            type="danger"
                            size="mini"
                            class="buyBtn4"
                        ></MyButton>
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
// 引入 公共组件
import MyButton from 'Components/common/MyButton'
import { mapState } from 'vuex';

export default {
    props: ['productInfo'],
    components: {
        MyButton
    },
    computed: {
        ...mapState(['common'])
    }
}
</script>

<style lang="stylus">
    .productContainer
        // 商品模块
        .product
            display flex
            box-sizing border-box
            margin-left .2rem
            li
                flex 1
                display flex
                flex-direction column
                margin .2rem
                margin-left 0
                // 商品信息
                .content
                    a
                        display flex
                        flex-direction column
                        img 
                            width 2.92rem
                            height 2.92rem
                            margin 0 auto 0.16rem
                            text-align center
                        .name
                            color #424242
                            line-height 0.4rem
                            height 0.8rem
                            font-size 0.28rem
                            line-height: 0.4rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box!important;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical /*! autoprefixer: on */;
                        .desc
                            display block
                            font-size 0.24rem
                            color #747474
                            padding-top 0.12rem
                            height 0.48rem
                            line-height 0.48rem
                            overflow hidden
                // 购买
                .buyWarp
                    display flex
                    // margin-top 0.2rem
                    justify-content space-between
                    align-items center
                    .price
                        font-size 0.32rem
                        color: #212121;
                        line-height 0.6rem
                        em
                            font-size 0.26rem
                    .buy
                        display flex
                        align-items center
                        // padding 0.05rem
                        border-radius 0.05rem
                        // background #F5222D
                        color #fff
                        // font-size 0.12rem
                        font-size 0.46rem
                        .buyBtn
                            width 0.48rem
                            height 0.48rem
                        .buyBtn4
                            margin 0
                            border-radius 0.08rem
                            .van-button
                                min-width 42px
                                height 24px
        // 样式1
        .productLayout1
            flex-wrap wrap
            li
                flex none
                width 47.2%

        // 样式2
        .productLayout2
            flex-wrap: wrap;
            li
                flex: none;
                width 30.5%;
                .content
                    img 
                        width 1.92rem!important
                        height 1.92rem!important
        // 样式4
        .productLayout4
            display block
            img 
                width 100%!important
                height 7.1rem!important
</style>
